<script setup lang="ts">
const dialogVisible = ref(false);
const isLoading = ref(false);

const openDialog = () => dialogVisible.value = true;
const closeDialog = () => dialogVisible.value = false;
const showLoading = () => isLoading.value = true;
const hideLoading = () => isLoading.value = false;

defineExpose({
  openDialog,
  closeDialog,
  showLoading,
  hideLoading
})

const props = defineProps({
  title: String,
  width: {
    type: String,
    default: "35%",
  },
  destroyOnClose: {
    type: Boolean,
    default: false,
  },
  confirmText: {
    type: String,
    default: "确认"
  }
})

// 自定义header: 全屏
const isFullscreen = ref(false)
const tooltipVisible = ref(false)
const showTooltip = () => tooltipVisible.value = true;
const hideTooltip = () => tooltipVisible.value = false;

// footer
defineEmits(['submit', 'closed'])
</script>

<template>
  <el-dialog v-model="dialogVisible" :width="props.width" draggable :destroy-on-close="props.destroyOnClose"
             :close-on-click-modal="true" :show-close="false" :fullscreen="isFullscreen" :lock-scroll="false"
             @closed="$emit('closed')">

    <template #header="{close, titleId, titleClass}">
      <div flex justify-between>
        <h3 :id="titleId" :class="titleClass" select-none>{{ props.title }}</h3>

        <div flex items-center>
          <el-tooltip :content="isFullscreen ? '还原' : '最大化'" :visible="tooltipVisible">
            <el-button plain style="border: 0;" @click="isFullscreen = !isFullscreen"
                       @mouseenter="showTooltip" @mouseleave="hideTooltip"
                       @mouseup="hideTooltip">
              <svg v-if="!isFullscreen" xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em"
                   viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="M3 21v-5h2v3h3v2zm13 0v-2h3v-3h2v5zM3 8V3h5v2H5v3zm16 0V5h-3V3h5v5z"/>
              </svg>
              <svg v-else xmlns="http://www.w3.org/2000/svg" width="1.4em" height="1.4em" viewBox="0 0 24 24">
                <path fill="currentColor"
                      d="M6 21v-3H3v-2h5v5zm10 0v-5h5v2h-3v3zM3 8V6h3V3h2v5zm13 0V3h2v3h3v2z"/>
              </svg>
            </el-button>
          </el-tooltip>

          <span ml--12px>
                  <el-button @click="close" plain style="border: 0;">
                  <svg xmlns="http://www.w3.org/2000/svg" width="1.5em" height="1.5em" viewBox="0 0 24 24">
                    <path fill="currentColor"
                          d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"/>
                  </svg>
                </el-button>
                </span>
        </div>
      </div>
    </template>

    <slot name="default"></slot>

    <template #footer>
      <el-button plain @click="closeDialog">取消</el-button>
      <el-button type="primary" @click="$emit('submit')" :loading="isLoading">{{ props.confirmText }}</el-button>
    </template>
  </el-dialog>
</template>

<style scoped>

</style>